<!DOCTYPE html>
<html ng-app="order">
<head>
    <meta charset="utf-8"></meta>
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=0"></meta>

    <title>订单</title>

    <link href="/static/AmazeUI-2.4.2/assets/css/admin.css" rel="stylesheet" type="text/css"></link>
    <link href="/static/AmazeUI-2.4.2/assets/css/amazeui.css" rel="stylesheet" type="text/css"></link>

    <link href="/static/css/personal.css" rel="stylesheet" type="text/css"></link>
    <link href="/static/css/orstyle.css" rel="stylesheet" type="text/css"></link>
    <script type="text/javascript" src="/static/js/angular.js"></script>

</head>

<body>
<head th:include="header"/>

<!--标题 -->
<div class="am-cf am-padding">
    <div class="am-fl am-cf"><strong class="am-text-danger am-text-lg">订单列表</strong> /
        <small>Order</small>
    </div>
</div>

<div class="am-tabs am-tabs-d2 am-margin data-am-tabs">

    <!-- <ul class="am-avg-sm-5 am-tabs-nav am-nav am-nav-tabs">
        <li class="am-active"><a href="#tab1">所有订单</a></li>
        <li><a href="#tab2">待付款</a></li>
        <li><a href="#tab3">待发货</a></li>
        <li><a href="#tab4">待收货</a></li>
        <li><a href="#tab5">待评价</a></li>
    </ul> -->

    <div class="am-tabs-bd">
        <div class="am-tab-panel am-fade am-in am-active" id="tab1">
            <div class="order-top">
                <div class="th th-item">
                    <td class="td-inner">商品</td>
                </div>
                <div class="th th-price">
                    <td class="td-inner">单价</td>
                </div>
                <div class="th th-number">
                    <td class="td-inner">数量</td>
                </div>
                <div class="th th-operation">
                    <td class="td-inner">&nbsp;&nbsp;&nbsp;&nbsp;</td>
                </div>
                <div class="th th-amount">
                    <td class="td-inner">合计</td>
                </div>
                <div class="th th-status">
                    <td class="td-inner">交易状态</td>
                </div>
                <div class="th th-change">
                    <td class="td-inner">交易操作</td>
                </div>
            </div>

            <div class="order-main" ng-controller="orderListCtr">
                <div class="order-list">
                    <span hidden="hidden">{{flag}}</span>
                    <!--交易成功-->
                    <div class="order-status5" ng-repeat="order in orders">
                        <div class="order-title">
                            <div class="dd-num">订单编号：<a href="javascript:;">{{order.orderId}}</a></div>
                            <span>下单时间：{{order.createTime}}</span>
                            <span style="padding-left: 100px;" ng-show="showDealTime(order.dealTime)">成交时间：{{order.dealTime}}</span>
                        </div>
                        <div class="order-content">
                            <div class="order-left">
                                <ul class="item-list" ng-repeat="oItem in order.orderItems">
                                    <li class="td td-item">
                                        <div class="item-pic">
                                            <a href="#" class="J_MakePoint">
                                                <img src="/static/images/bicycle.jpg"
                                                     class="itempic J_ItemImg"/>
                                            </a>
                                        </div>
                                        <div class="item-info">
                                            <div class="item-basic-info">
                                                <a href="#">
                                                    <p>{{oItem.itemName}}</p>
                                                </a>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="td td-price">
                                        <div class="item-price">
                                            {{oItem.itemPrice}}
                                        </div>
                                    </li>
                                    <li class="td td-number">
                                        <div class="item-number">
                                            <span>×</span>{{oItem.itemNums}}
                                        </div>
                                    </li>
                                    <li class="td td-operation">
                                        <div class="item-operation">

                                        </div>
                                    </li>
                                </ul>
                            </div>
                            <div class="order-right">
                                <li class="td td-amount">
                                    <div class="item-amount">
                                        合计：{{order.amout}}
                                    </div>
                                </li>
                                <div class="move-right">
                                    <li class="td td-status">
                                        <div class="item-status">
                                            <p class="Mystatus" ng-bind="setStauts(order.stauts)"></p>
                                            <p class="order-info"><a href="/order/info/{{order.orderId}}">订单详情</a></p>
                                        </div>
                                    </li>
                                    <li class="td td-change">
                                        <div class="am-btn am-btn-danger anniu" ng-bind="setChange(order.stauts)"
                                             ng-click="changeStauts(order.orderId,order.stauts)">
                                        </div>
                                    </li>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div>
                    <ul class="am-pagination am-pagination-centered">
                        <li ng-click="changePage(pageIndex-1)" id="perPage"><a href="">&laquo;</a></li>
                        <li class="am-disabled"><a href="#">{{pageIndex}}</a></li>
                        <li ng-click="changePage(pageIndex+1,totalPages)" id="nextPage"><a href="">&raquo;</a></li>
                        <li>共{{totalPages}}页</li>
                    </ul>
                </div>

            </div>

        </div>

    </div>


</div>

</body>
<script type="text/javascript">
    /*<![CDATA[*/
    var app = angular.module("order", []);
    app.controller("orderListCtr", function ($scope, $http) {
        $http.get("/order").success(function (response) {
            $scope.orders = response.data.list;
            $scope.pageIndex = response.data.page;
            $scope.totalPages = response.data.totalPage;
        });

        $scope.changePage = function (pageIndex, totalPages) {
            var pageNum = parseInt(pageIndex);
            var total = parseInt(totalPages);
            if (1 > pageNum)
                return;
            if (total < pageNum)
                return;

            $http({
                url: '/order',
                method: 'get',
                params: {
                    page: pageNum,
                },
            }).success(function (response) {
                console.log(response)
                $scope.orders = response.data.list;
                $scope.pageIndex = response.data.page;
                $scope.totalPages = response.data.totalPage;
            })
        }


        $scope.setStauts = function (stauts) {
            if (stauts == 1)
                return "未支付";
            if (stauts == 2)
                return "未发货";
            if (stauts == 3)
                return "已发货";
            if (stauts == 4)
                return "交易成功";
            if (stauts == 5)
                return "交易关闭";
        }

        $scope.setChange = function (stauts) {
            if (stauts == 1)
                return "一键付款";
            if (stauts == 2)
                return "提醒发货";
            if (stauts == 3)
                return "确认收货";
            if (stauts == 4)
                return "交易完成";
            if (stauts == 5)
                return "交易关闭";
        }

        $scope.showDealTime = function (dealTime) {
            return dealTime == null || dealTime == undefined || dealTime == "" ? false : true;
        }

        $scope.flag = false;
        $scope.changeStauts = function (orderId, stauts) {

            if (stauts == 5)
                return;
            if (stauts == 4) {
                alert("交易完成，去分享评论吧;");
                return;
            }

            var flag = $scope.flag;
            console.log(flag)
            if (stauts == 2) {
                if (flag == true)
                    alert("已经提醒过了!");
            }

            $http({
                url: '/order',
                method: 'put',

                params: {
                    orderId: orderId,
                    stauts: stauts
                },
            }).success(function (res) {
                console.log(res)
                if (res.message == 2) {
                    $scope.flag = true;
                    return;
                }
                $scope.changePage($scope.pageIndex)
            })
        }
    });
    /*]]>*/
</script>
</html>